import React, { useEffect } from "react"
import { Row, Col, Typography } from "antd"
import styles from "./home.module.css"
import { Header, Footer, SideMenu, Carousel, ProductCollection } from "../../components"
import { productList2, productList3 } from "../../mockups"
import { useNavigate } from "react-router-dom"
// import axios from "axios"
import { getAsyncDataActionCreator } from "../../store/recommendProducts/recommendProductsActions"
import { useDispatch } from "react-redux"
import { MainLayout } from "../../layout/mainLayout"

const HomePage: React.FC = () => {
	const navigator = useNavigate()

	// const [productList1, setProductList1] = useState< any[]>([])

	// useEffect(() => {
	// 	axios
	// 		.get("/productCollections")
	// 		.then(res => {
	// 			console.log("productCollections ==> res: ", res)
	// 			setProductList1(res.data["productList1"])
	// 		})
	// 		.catch(err => {
	// 			console.log("productCollections ==> err: ", err)
	// 		})
	// }, [])

	const dispatch = useDispatch()
	useEffect(() => {
		dispatch(getAsyncDataActionCreator())
	}, [])

	return (
		<MainLayout>
			<h1
				onClick={() => {
					navigator("/detail/121212")
				}}
			>
				ToDetailPage
			</h1>
			<div className={styles["page-content"]}>
				<Row style={{ marginTop: 20 }}>
					<Col span={6}>
						<SideMenu />
					</Col>
					<Col span={18}>
						<Carousel />
					</Col>
				</Row>
				{/* {productList1.length && (
					<ProductCollection
						title={
							<Typography.Title level={3} type="warning">
								周末游
							</Typography.Title>
						}
						sideImage="https://docs.adaptive-vision.com/avl/img/icon/TestImage.png"
						products={productList1}
					/>
				)} */}
				<ProductCollection
					title={
						<Typography.Title level={3} type="danger">
							境外游
						</Typography.Title>
					}
					sideImage="https://docs.adaptive-vision.com/avl/img/icon/TestImage.png"
					products={productList2}
				/>
				<ProductCollection
					title={
						<Typography.Title level={3} type="success">
							机票
						</Typography.Title>
					}
					sideImage="https://docs.adaptive-vision.com/avl/img/icon/TestImage.png"
					products={productList3}
				/>
			</div>
		</MainLayout>
	)
}

export default HomePage
